<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'baidu.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		a{text-decoration:none;}
		.box111 a{color:black;}
		.box111 a:hover {color: blue;}
		.box41 a{color:black;}
		.box41 a:hover {color: blue;}
		.box42 a{color:black;}
		.box42 a:hover {color: blue;}
		.box61 a{color:gray;}
		.box61 a:hover {color: black;}
		.box121 a{color:black;}
		.box121 a:hover {color: blue;}
		.box122 a{color:white;}
		#one{
			color:#fe2d46;
		}
		#two{
			color:#ff6600;
		}
		#three{
			color:#faa90e;
		}
		#four{
			color: gray;
		}
		.baidu{
			width: 100%;
			height: 745px;
			background-color: ;
			display: -webkit-flex;
			display: flex;
			flex-direction:column;
		}
		.box1{
			float:left;
			width:100%;
			height:50px;
			text-align: center;
			background-color: ;
			display: flex;
			flex-direction:row;
			justify-content: flex-start;
		}
		.box11{
			width:50%;
			height:50px;
			text-align: center;
			display: flex;
			flex-direction: row;
			justify-content:flex-start;
		}
		.box12{
			width:50%;
			height:50px;
			text-align: center;
			display: flex;
			flex-direction: row;
			justify-content:flex-end;
			
		}
		.box111{
			margin-left: 30px;
			height:50px;
			line-height: 50px;
			font-size: 0.8em;
		}
		.box121{
			margin-right: 30px;
			height:50px;
			line-height: 50px;
			font-size: 0.8em;
		}
		.box122{
			margin-right: 30px;
			margin-top:8px;
			height:30px;
			background-color:blue;
			color:white;
			padding: 0 10px;
			border-radius:12px;
			display: inline-block;
			font-size: 0.8em;
			text-align: center;
		}
		.box2{
			width:600px;
			height:80px;
			background-color:white;
			margin: 30px auto 20px;
		}
		img {
  			display: block;
 			margin-left: auto;
			margin-right: auto;
		}
		.box3{
			width:650px;
			height:45px;
			background-color: white;
			margin: 0 auto ;
			
		}
		input{
			display:inline-block;
			font-size:0;
			height:45px;
			width:550px;
			border: 2px solid #4e6ef2;
			border-top-left-radius:15px;
			border-bottom-left-radius:15px;
			
		}
		.box31{
			width:100px;
			height:45px;
			float:right;
			font-size:15px;
			background-color:#4e6ef2;
			color:white;
			border: 1px solid white;
			border-top-right-radius:15px;
			border-bottom-right-radius:15px;
			
		}
		.box4{
			width:  660px;
			height: 120px;
			background-color: ;
			margin: 60px auto 0;
			display: flex;
			flex-direction:row;
			font-size: 14px;
		}
		.box41{
			width: 330px;
			height:120px;
			background-color: white;
			text-align: left;
			line-height: 2.3;
		}
		.box42{
			width: 330px;
			height:120px;
			background-color: white;
			margin-left:100px;
			text-align: left;
			line-height: 2.3;
		}
		.box411{
			float: right;
		}
		.box50{
			height: 330px;
		}
		.box6{
			width:1100px;
			height:30px;
			margin:0 auto;
			background-color: ;
			bottom: 0;
			display: flex;
			flex-direction: row;
			justify-content:center;
			color: gray;
		}
		.box61{
			height:30px;
			font-size: 0.8em;
			margin-left: 15px;
			line-height: 30px;
		}
	</style>
  </head>
  
  <body>
  	<div class="baidu">
  		<div class="box1">
  			<div class="box11">
  				<div class="box111"><a href="">新闻</a></div>
  				<div class="box111"><a href="">hao123</a></div>
  				<div class="box111"><a href="">地图</a></div>
  				<div class="box111"><a href="">直播</a></div>
  				<div class="box111"><a href="">视频</a></div>
  				<div class="box111"><a href="">贴吧</a></div>
  				<div class="box111"><a href="">学术</a></div>
  				<div class="box111"><a href="">更多</a></div>
  			</div>
  			<div class="box12">
  				<div class="box121"><a href="">设置</a></div>
  				<button class="box122"><a href="">登录</a></button>
  			</div>
  		</div>
  		<div class="box2"><img src="logo.png"/></div>
  		<div class="box3"><input type="text"/><button class="box31">百度一下</button></div>
  		<div class="box4"><div class="box41">百度热榜<br/>
  								<span id="one">1</span><a href=""> &nbsp&nbsp备孕者可以接种新冠疫苗</a><br/>
  								<span id="two">2</span><a href=""> &nbsp&nbspBBC涉疆报道画面和解说词完全相反热</a><br/>
  								<span id="three">3</span><a href=""> &nbsp&nbsp江苏致11死车祸原因:货车轮胎脱落</a></div>
  						  <div class="box42"><a href=""><span class="box411">换一换</span></a><br/>
  						  		<span id="four">4</span><a href=""> &nbsp&nbsp泰国考虑为外国游客提供免费机票</a><br/>
  						  		<span id="four">5</span><a href=""> &nbsp&nbsp2名中国矿工在尼日利亚遭绑架</a><br/>
  						  		<span id="four">6</span><a href=""> &nbsp&nbsp清华北大30名学霸参军入伍</a></div>
  		</div>
  		<div class="box50">5</div>
  		<div class="box6">
  			<div class="box61"><a href="">设为首页</a></div>
  			<div class="box61"><a href="">关于百度</a></div>
  			<div class="box61"><a href="">About Baidu</a></div>
  			<div class="box61"><a href="">百度营销</a></div>
  			<div class="box61"><a href="">使用百度前必读</a></div>
  			<div class="box61"><a href="">意见反馈</a></div>
  			<div class="box61"><a href="">帮助中心</a></div>
  			<div class="box61"><a href="">京公网安备11000002000001号</a></div>
  			<div class="box61"><a href="">京ICP证030173号</a></div>
  			<div class="box61">©2021 Baidu</div>
  			<div class="box61">(京)-经营性-2017-0020</div>
  		</div>
  	</div>
  </body>
</html>
